<template>
  <div class="control-panel-root">

    <el-button type="primary" @click="refresh">刷新</el-button>
    <el-button type="danger" @click="deleteMachine">删除</el-button>
    <div class="refresh-dt">{{ refreshDt }}</div>

    <div class="count-legend">
      <div class="count-legend-item succ-bg succ-border"></div>
      <span>正常: {{ onlineCount }}</span>
      <div class="count-legend-item warn-bg warn-border"></div>
      <span>警告: {{ warnClount }}</span>
      <div class="count-legend-item fail-bg fail-border"></div>
      <span>离线: {{ offlineCount }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getNowTimeFormat } from '@/assets/utils/util';
import { deleteMachineApi } from "@/api/guardcat";

// ---------------- props
const props = defineProps({
  onlineCount: { type: Number, default: 0 },
  offlineCount: { type: Number, default: 0 },
  warnClount: { type: Number, default: 0 },
})

const refreshDt = ref(getNowTimeFormat());

// ---------------- emits
const emits = defineEmits(['clickRefresh'])

// ---------------- data

// ---------------- method
const refresh = () => {
  refreshDt.value = getNowTimeFormat();
  emits('clickRefresh')
}

const deleteMachine = () => {
  deleteMachineApi().then(_ => {
    refresh();
  });
}

</script>

<style scoped lang="scss">
.control-panel-root {
  @include flex(row, flex-start, center);
  @include box(100%, 40px);

  .refresh-dt {
    color: var(--el-color-primary);
    padding: 10px;
    min-width: 200px;
    text-align: center;
    font-size: 14px;
  }

  .count-legend {
    @include flex(row, flex-start, center);
    padding: 0 10px;

    span {
      @include font(14px, 700);
      color: #737373;
      margin-right: 20px;
    }

    .count-legend-item {
      @include box(18px, 18px);
      border-radius: 4px;
      margin-right: 3px;
    }
  }
}
</style>